<template>
  <div v-if="content.componentType === 13" class="title-bar title-component pos-rel"
    :class="'title-align-' + content.propMap.textAlign" :style="{background: content.propMap.backgroundColor, color: content.propMap.fontColor,
      fontSize: content.propMap.textSize, padding: content.propMap.verticalMargin + 'px ' + content.propMap.horizontalMargin + 'px'}" @click="linkTo(content.propMap)">
    <button v-if="content.propMap.linkType === '1002'" :send-message-title="memberInfo.nickname + '的V客主页'" plain send-message-img="https://veekrayimg.joinsun.vip/images/share-s-picture.png" show-message-card="true"
      send-message-path="/pages/home/main" open-type="contact" class="contactBtn hidden-submit button-icon"></button>
    {{content.propMap.title}}
    <div v-if="content.propMap.titleStyle === '11'" class="title-more flex v-align-c font-12" :style="{color: content.propMap.showMoreColor}">
      查看更多<icon class="iconfont icon-arrow-right icon-next font-10"></icon>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  methods: {
    linkTo(item) {
      this.$emit('linkTo', item)
    }
  }
}
</script>
<style lang="less" scoped>
.title-component {
  box-sizing: border-box;
}
.contactBtn {
  background-color: transparent !important;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  border-color: transparent !important;
  border: none !important;
}
.title-more{
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 5;
  margin: -9px 0 0 0;
}
// 标题栏样式
.title-align-10 {
  text-align: left;
}
.title-align-11 {
  text-align: center;
}
.title-align-12 {
  text-align: right;
}
</style>
